<template>
  <div class="bomBuyer">
    <div>
      <ele-form-search
        ref="eleFormSearch"
        :formConfig="searchConfig"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      ></ele-form-search>
      <div class="content-main">
        <div class="left-table">
          <ele-table
            ref="domTable"
            :column="domColumn"
            :getList="getList"
            :beforeRequest="selfMasterBeforeRequest"
            @row-click="masterRowClick"
          >
          </ele-table>
        </div>
        <div class="right-table">
          <!-- <div class="detail-info-main">
            <div class="title-p">
              物料需求单详情
            </div>
            <div class="info-main">
              <div class="info-item">
                <span class="info-label">{{ $i18n.t("bomBuyer.bomCode") }}：</span>
                <span class="info-text">{{ masterDetail.recheckOrderCode||'-' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">{{ $i18n.t("bomBuyer.bomVin") }}：</span>
                <span class="info-text">{{ masterDetail.vinCode||'-' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">{{ $i18n.t("bomBuyer.createTime") }}：</span>
                <span class="info-text">{{ masterDetail.createTime||'-' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">{{ $i18n.t("bomBuyer.carType") }}：</span>
                <span class="info-text">{{ masterDetail.modelName||'-' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">{{ $i18n.t("common.remark") }}：</span>
                <span class="info-text">{{ masterDetail.remarks||'-' }}</span>
              </div>
            </div>
          </div> -->
          <div class="sub-table-table">
            物料需求列表
          </div>
          <div class="sub-form-search">
            <ele-form-search
              ref="eleDetailFormSearch"
              :formConfig="detailSearchConfig"
              @handleSearch="handleDetailSearch"
              @handleReset="handleDetailReset"
            ></ele-form-search>
          </div>
          <ele-table
            ref="domDetailTable"
            :column="detailColumn"
            :apiImmediate="false"
            :getList="mesPcMaterialDemandGetList"
            :beforeRequest="selfSubBeforeRequest"
            :operateList="operateList"
            @handleOperateEvent="handleOperateEvent"
          >
          </ele-table>
        </div>
      </div>
    </div>
    <detail-drawer 
      ref="detailDrawerRef"
      :materialNum="currentMaterialNum"
      @updateList="updateListAfterSubmit"
     />
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="showViewerImages"
      :initialIndex="initialIndex"
    />
  </div>
</template>

<script>
import { exportExcel } from "@/utils/judge";
import eleFormSearch from '@/components/ele-form-search/index'
import { operateList, searchConfig, detailSearchConfig, rowConfig } from './config'
import { getList, mesPcMaterialDemandGetList, exportUrl } from '@/api/materials/supplier.js'
import { searchArrKey } from '@/mixins/searchArrKey'
import detailDrawer from './quotation/quotationDrawer'

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
// import url from '@/axios/url'
// import { exportExcel } from '@/utils/judge'
// const { minioUrl } = url()
export default {
  name: 'cabinet',
  components: {
    eleFormSearch,
    detailDrawer,
    ElImageViewer
  },
  mixins: [searchConfig, detailSearchConfig, operateList, searchArrKey],
  data() {
    let _self = this
    return {
      formConfig: {},
      processCodeList: [],
      isLoading: false,
      loading: false,
      formDataDialog: {},
      currentMaterialNum: 1,
      currentDetailId: null,
      masterSearchData: { material: 1 },
      getList,
      mesPcMaterialDemandGetList,
      // 列表页字段的绑定配置
      domColumn: [
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        {
          prop: 'recheckOrderCode',
          label: $i18n.t('bomBuyer.bomCode'),
          minWidth: 150,
          showOverflowTooltip: true,
          noChecked: true
        },
        {
          prop: 'vinCode',
          label: $i18n.t('bomBuyer.bomVin'),
          minWidth: 170,
          showOverflowTooltip: true
        },
        {
          prop: 'modelName',
          label: $i18n.t('bomBuyer.carType'),
          minWidth: 170,
          showOverflowTooltip: true
        },
        {
          prop: 'materialTypeNum',
          label: $i18n.t('bomBuyer.materialTypeNum'),
          minWidth: 150,
          showOverflowTooltip: true
        },
        {
          prop: 'winNum',
          label: '已中标数量',
          minWidth: 180,
          showOverflowTooltip: true,
          render: (h, scope) => {
            return <span class="blue-num">{scope.row.winNum}</span>
          }
        },
        {
          prop: 'quotationNum',
          label: $i18n.t('supplier.quotedMaterialType'),
          minWidth: 180,
          showOverflowTooltip: true,
          render: (h, scope) => {
            return <span class="blue-num">{scope.row.quotationNum}</span>
          }
        },
        {
          prop: 'createTime',
          label: $i18n.t('bomBuyer.createTime'),
          minWidth: 160,
          showOverflowTooltip: true,
          noChecked: true
        }
      ],
      rowParams: {
        recheckOrderId: null
      }, //主表点击后子表
      masterDetail: {
        recheckOrderCode: null,
        vinCode: null,
        modelName: null,
        createTime: null,
        remarks: null
      },
      statusClassData: ['', 'status-blue', 'status-light-green', 'status-red', 'status-black', 'status-dark-green', 'status-dark-blue', 'status-sky-blue', 'status-orange', 'status-gray'],
      detailColumn: [
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        {
          prop: 'materialName',
          label: $i18n.t('bomBuyer.materialName'),
          minWidth: 140,
          showOverflowTooltip: true
        },
        {
          prop: 'demandStatus',
          label: $i18n.t('common.status'),
          minWidth: 140,
          showOverflowTooltip: true,
          render: (h, scope) => {
            return (
              <span>
                <span class={`${_self.statusClassData[Number(scope.row.status) || 0]} status-circle`}></span>
                <span>{scope.row.demandStatus}</span>
              </span>
            )
          }
        },
        {
          prop: 'materialNum',
          label: $i18n.t('bomBuyer.quantity'),
          minWidth: 140,
          showOverflowTooltip: true
        },
        {
          prop: 'unit',
          label: $i18n.t('bomBuyer.unit'),
          minWidth: 140,
          showOverflowTooltip: true,
          render: (h, scope) => {
            return <span>个/L</span>
          }
        },
        {
          prop: 'materialPhotoUrl',
          label: $i18n.t('bomBuyer.picture'),
          minWidth: 140,
          showOverflowTooltip: true,
          render: (h, scope) => {
            let _dom = []
            if (scope.row.materialPhotoUrl) {
              _dom.push(
                <el-link
                  type="primary"
                  onClick={() => {
                    this.showImgViewer(scope.row)
                  }}
                >
                  {$i18n.t('common.view')}
                </el-link>
              )
            } else {
              _dom.push(<span>-</span>)
            }
            return _dom
          }
        },
        {
          prop: 'remarks',
          label: $i18n.t("common.remark"),
          minWidth: 140,
          showOverflowTooltip: true
        },
        {
          prop: 'deadlineTime',
          label: $i18n.t('bomBuyer.offerDeadline'),
          minWidth: 160,
          showOverflowTooltip: true
        },
        {
          prop: 'operate',
          label: $i18n.t('common.operation'),
          width: 200,
          fixed: 'right',
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
          }
        }
      ],
      showViewer: false,
      initialIndex: 0,
      showViewerImages: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'
      ]
    }
  },
  computed: {},
  methods: {
    //主表搜索
    handleSearch() {
      this.refresh()
    },
    //主表重置
    handleReset() {
      this.refresh()
    },
    //子表搜索
    handleDetailSearch() {
      this.subRefresh(false)
    },
    //子表重置
    handleDetailReset() {
      this.subRefresh()
    },
    // 主表，请求之前操作
    selfMasterBeforeRequest(data) {
      const params = { ...data, ...this.masterSearchData, ...this.getSearchParams() }
      if (Array.isArray(params.dateRanger)) {
        params.startTime = params.dateRanger[0]
        params.endTime = params.dateRanger[1]
        delete params.dateRanger
      }
      return params
    },
    // 子表，请求之前操作
    selfSubBeforeRequest(data) {
      const params = { ...data, ...this.rowParams, ...this.getDetailSearchParams() }
      return params
    },
    // 获取搜索参数
    getSearchParams() {
      let formData = this.$refs.eleFormSearch.formData || {}
      formData = this.getArrtoMap(formData)
      return formData
    },
    // 获取搜索参数
    getDetailSearchParams() {
      let formData = this.$refs.eleDetailFormSearch.formData || {}
      formData = this.getArrtoMap(formData)
      return formData
    },
    // 点击主表行
    masterRowClick(row) {
      this.getSubRequestParams(row)
      this.$refs.domDetailTable.getTableData(true)
    },
    updateListAfterSubmit() {
      this.$refs.domDetailTable.getTableData(true)
    },
    // 获取主表点击行参数，用于子表请求参数
    getSubRequestParams(data) {
      console.log(data)
      this.rowParams.recheckOrderId = data.id
      this.masterDetail.recheckOrderCode = data.recheckOrderCode
      this.masterDetail.vinCode = data.vinCode
      this.masterDetail.modelName = data.modelName
      this.masterDetail.remarks = data.remarks
      this.masterDetail.createTime = data.createTime
      console.log(this.masterDetail)
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.iddss === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    // 表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {
        download: () => {
          console.log(this.rowParams.recheckOrderId)
          exportExcel(exportUrl, {
            recheckOrderId: this.rowParams.recheckOrderId
          })
        }
      }
      fnc[data.handleName]()
    },
    // 子表表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        detail: () => {
          this.currentMaterialNum = Number(row.materialNum)
          this.currentDetailId = row.id
          this.rowDetail(row)
        },
        quotation: () => {
          this.currentDetailId = row.id
          this.currentMaterialNum = Number(row.materialNum)
          this.rowQuotation(row)
        }
      }
      fnc[handleName]()
    },
    disableFields(flag) {
      this.formDescDialog.disabled = flag
      this.formDescDialog.isShowSubmitBtn = !flag
    },
    rowQuotation(row) {
      this.$refs.detailDrawerRef.detailId = this.currentDetailId
      if(row.demandStatus === '已驳回') {
        this.$refs.detailDrawerRef.operateType = 3
      } else {
        this.$refs.detailDrawerRef.operateType = 0
      }
      this.$refs.detailDrawerRef.materialDetail = {
        ...row,
        vinCode: this.masterDetail.vinCode
      }
      this.$refs.detailDrawerRef.getBrandList()
      this.$refs.detailDrawerRef.showDrawer()
    },
    rowDetail(row) {
      this.$refs.detailDrawerRef.detailId = this.currentDetailId
      this.$refs.detailDrawerRef.operateType = 1
      this.$refs.detailDrawerRef.materialDetail = {
        ...row,
        vinCode: this.masterDetail.vinCode
      }
      this.$refs.detailDrawerRef.getBrandList()
      this.$refs.detailDrawerRef.showDrawer()
    },
    //图片预览展示
    showImgViewer(row) {
      this.showViewer = true
      this.showViewerImages = row.materialPhotoUrl?.split(',') || []
    },
    //关闭图片预览弹框
    closeViewer() {
      this.showViewer = false
      this.initialIndex = 0
    },
    // 刷新主表
    refresh(isReset = true) {
      this.$nextTick(() => {
        this.$refs.domTable.getTableData(isReset)
      })
    },
    // 刷新子表
    subRefresh(isReset = true) {
      this.$nextTick(() => {
        this.$refs.domDetailTable.getTableData(isReset)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.mesProcess {
  /deep/.el-transfer-panel {
    width: 40% !important;
  }
  .warning-row {
    background: oldlace;
  }
}
/deep/ .warning-icon {
  color: #e6a23c;
  padding-left: 4px;
}
/deep/ .status-circle {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  margin-right: 4px;
}
/deep/ .status-sky-blue {
  background-color: skyblue;
}
/deep/ .status-blue {
  background-color: #3c7fcd;
}
/deep/ .status-dark-blue {
  background-color: #2c43c4;
}
/deep/ .status-light-green {
  background-color: #67c23a;
}
/deep/ .status-dark-green {
  background-color: #078159;
}
/deep/ .status-orange {
  background-color: #e6a23c;
}
/deep/ .status-red {
  background-color: #f56c6c;
}
/deep/ .status-black {
  background-color: rgba(0,0,0,0.6)
}
/deep/ .status-gray {
  background-color: #aaaaaa;
}
.content-main {
  display: flex;
  justify-content: space-between;
  .left-table,
  .right-table {
    width: 49%;
  }
  /deep/ .blue-num {
    color: #0066ff;
  }
  .detail-info-main {
    padding-top: 10px;
    .title-p {
      font-size: 18px;
      line-height: 30px;
      margin-bottom: 10px;
    }
    .info-main {
      display: flex;
      flex-wrap: wrap;
      .info-item {
        width: 40%;
        margin-bottom: 10px;
        font-size: 14px;
        .info-label {
          padding-right: 2px;
        }
      }
    }
  }
  .sub-table-table {
    display: inline-block;
    font-size: 14px;
    line-height: 24px;
    padding: 6px 0;
    color: #6399d7;
    border-bottom: 2px solid #6399d7;
    margin-bottom: 20px;
  }
}
</style>
